<template>
  <div class="q_wapper">
    <el-container style="100%">
      <Rolelist></Rolelist>
      <div class="user-perm">
        <div class="handle-perm">
          <div :body-style="{padding: '0px'}" class="power_card">
            <div class="hd">数据操作权限</div>
            <div class="date-perm">
              <el-switch
                style="display: block"
                v-model="fromModel.put"
                active-color="#13ce66"
                off-value="0"
                on-value="1"
                :disabled="isselect"
                inactive-text="新增数据"
                @change="saveedit()"
              ></el-switch>
              <el-switch
                style="display: block"
                :disabled="isselect"
                v-model="fromModel.edit"
                off-value="0"
                on-value="1"
                active-color="#13ce66"
                inactive-text="修改数据"
                @change="saveedit()"
              ></el-switch>
              <el-switch
                style="display: block"
                :disabled="isselect"
                off-value="0"
                on-value="1"
                v-model="fromModel.remove"
                active-color="#13ce66"
                inactive-text="删除数据"
                @change="saveedit()"
              ></el-switch>
            </div>
          </div>
        </div>
        <div class="menu-list" ref="getheight">
          <div class="tit">
            <div slot="header" class="hd">
              <span>功能菜单权限</span>
              <el-button
                style="float: right;margin-top:15px;margin-left:10px;"
                type="primary"
                @click="add()"
                icon="el-icon-edit"
              >新增</el-button>
              <el-button
                style="float: right;margin-top:15px;margin-left:10px;"
                type="primary"
                v-if="!isselect"
                @click="seva()"
                icon="el-icon-collection"
              >保存</el-button>
            </div>
            <div class="power_tab">
              <el-table
                :data="tableData"
                height="100%"
                row-key="authorizeId"
                border
                class="tab"
                default-expand-all
                :header-cell-style="{background:'#f2f6fc',color:'#606266'}"
                :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
              >
                <el-table-column type="selection" width="55">
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="checkChange(scope,scope.row.checked)"
                    ></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="中文名"></el-table-column>
                <el-table-column prop="name_En" label="英文名"></el-table-column>
                <el-table-column prop="icon" label="图标"></el-table-column>
                <el-table-column prop="address" label="地址">
                  <template slot-scope="scope">
                    <span :class="scope.row.icon"></span>
                  </template>
                </el-table-column>
              </el-table></div>
            </div>
          </div>
      </div>
    </el-container>
  </div>
</template> 
<script>
import Rolelist from "../../components/systemSetup/tree/Rolelist.vue";
import bus from "../../components/common/bus.js";
import { log } from "util";
export default {
  name: "auth",
  data() {
    return {
      //控制数据操作权限按钮
      isselect: true,
      fromModel:{
        "name": "",
        "projectId": localStorage.getItem("project_Id"),
        "projectTypeId": 0,
        "put":false,
        "edit":false,
        "remove":false,
        "projectRoleId":0
      },
      tableData: [],
      //单个角色权限
      roleData: {},
      //表格适配高度
      tableHeight: window.innerHeight - 200,
    };
  },
  created() {
    //获取所有权限
    this.$axios.get("/Authorize/Tree").then(res => {
      var dat = res.data.data;
      //给所有权限添加属性checked
      this.tableData = this.addchecked(dat);
    });
    //拿到传过来的角色id
    bus.$on("putrole", val => {
        this.isselect=false;
        this.fromModel.name=val.name;
        this.fromModel.projectId=val.projectId;
        this.fromModel.projectTypeId=val.projectTypeId;
        this.fromModel.projectRoleId=val.projectRoleId;
        this.fromModel.put=val.put==1;
        this.fromModel.edit=val.edit==1;
        this.fromModel.remove=val.remove==1;
        this.$axios
          .get(`/RoleAuthorize/ProjectRole/${this.fromModel.projectRoleId}`)
          .then(res => {
            this.isselect = false;
            this.roleData = res.data.data;
            if(res.data.data){
              this.tableData.forEach((element) => {
                  element.checked=false;
                  this.handleCheckAll(element,false);
                  res.data.data.forEach((e)=>{
                    if(element.authorizeId==e.authorizeId){
                      element.checked=true;
                    }
                    this.selectChecked(e.authorizeId,element);
                  })
              });
            }
          });
    });
  },
  methods: {
    add(){
      
    },
    //给所有权限添加属性checked
    addchecked(dat) {
      dat.forEach((element, i) => {
        element.checked = false;
        if (!!element.children) {
          this.addchecked(element.children);
        }
      });
      return dat;
    },
    //监听函数
    checkChange(scope, checked) {
      if (scope.row.children) {
        this.handleCheckAll(scope.row, scope.row.checked);
      }
      if (scope.row.parent_Id) {
        //遍历所有父属性
        this.tableData.forEach((element, i) => {
          if (element.authorizeId == scope.row.parent_Id) {
            //  console.log(element);//拿到父节点的数据
            this.getParent(element, scope.row.authorizeId, scope.row.checked);
          }
        });
      }
    },
    selectChecked(id,element){
      if(element){
          if(id==element.authorizeId){
              element.checked=true;
          }
        if(element.children){
            element.children.forEach((e, i) => {
              this.selectChecked(id,e);
            });
        }
      }
    },
    //全选功能
    handleCheckAll(row, checked) {
      row.children.forEach((element, i) => {
        element.checked = checked;
        if(row.children){
          this.handleCheckAll(element, checked)
        }
      });
    },
    //单点功能
    getParent(parent, id, checked) {
      //遍历每个子节点
      let mun = 0;
      if (checked) {
        parent.children.forEach((element, i) => {
          if (!!element.checked === checked) {
            mun++;
          }
        });
        if (mun == parent.children.length) {
          parent.checked = checked;
        }
      } else {
        parent.checked = checked;
      }
    },
    //数据操作权限
    saveedit() {
      var data={
        "name":this.fromModel.name,
        "projectId":this.fromModel.projectId,
        "projectTypeId":this.fromModel.projectTypeId,
        "projectRoleId":this.fromModel.projectRoleId,
        "put":this.fromModel.put?1:0,
        "edit":this.fromModel.edit?1:0,
        "remove":this.fromModel.remove?1:0,
      };
      this.$axios.put("/ProjectRole/"+this.fromModel.projectRoleId, data).then(res => {
      if (!res.data.hasError) {
          this.$message({
            type: "success",
            message: "数据保存成功!"
          });
        }
      });
    },
    //获取权限authorizeId数组
    getpower_id(obj, arr) {
      obj.forEach((element, i) => {
        //  console.log(element);
        if (!!element.checked) {
          arr.push({authorizeId:element.authorizeId});
        }
        if (!!element.children) {
          this.getpower_id(element.children, arr);
        }
      });
    },
    //功能菜单权限
    seva() {
      //遍历功能菜单权限
      var arr = [];
      this.getpower_id(this.tableData, arr);
      this.$axios.put("/RoleAuthorize/"+this.fromModel.projectRoleId, arr).then(res => {
        if (!res.data.hasError) {
          this.$message({
            type: "success",
            message: "数据保存成功!"
          });
        }
      });
    },
    //展示权限
    openpower(val) {
      let arr = this.fromModel.authorizeId;
      this.tableData.forEach((element, i) => {
        if (arr.includes(element.authorizeId)) {
          element.checked = true;
        } else {
          element.checked = false;
        }
        if (!!element.children) {
          element.children.forEach(ele => {
            if (arr.includes(ele.authorizeId)) {
              ele.checked = true;
            } else {
              ele.checked = false;
            }
          });
        }
      });
    }
  },
  components: {
    Rolelist
  },
};
</script>
<style lang="scss" scope>
.tit{
  background-color: #fff;
  border-radius: 5px;
  height: 100%;
  .hd{
    height: 60px;
    line-height:60px ;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }
}
.power_card {
  background-color: #fff;
  border-radius: 5px;
  .hd {
    box-sizing: border-box;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ebeef5;
  }
}
.q_wapper {
  height: 100%;
  width: 100%;
  .user-perm {
    height: 100%;
    width: 100%;
    margin-left: 15px;
    position: relative;
    .handle-perm {
      margin-bottom: 20px;
      .date-perm {
        padding: 40px 0;
        .el-switch {
          float: left;
          margin-left: 30px;
        }
      }
    }
    .menu-list {
      width: 100%;
      position: absolute;
      top: 150px;
      bottom: 0;
      .el-card {
        height: 99%;
      }
    }
    .power_tab {
      height: calc(100% - 100px);
      box-sizing: border-box;
      overflow: auto;
      padding: 0 20px;
      .has-gutter {
        /deep/.el-checkbox {
          display: none;
        }
      }
    }
    .el-dialog{
      height: auto;
    }
  }
}
</style>